<template>
  <div>
    <el-header height="64px" class="ai-header">
      <div class="header-left">
        <img src="@/assets/logo.png" alt="logo" class="logo" />
        <span class="site-title">AI应用生成</span>
      </div>
      <div class="header-right">
        <el-avatar size="medium" :src="this.$store.state.user.loginStatus?'https://vue.ruoyi.vip/static/img/profile.473f5971.jpg':'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
    
         <el-dropdown v-if="this.$store.state.user.loginStatus" style="margin-left: 12px;">
            <span class="el-dropdown-link" >
              {{this.$store.state.user.userNo}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" >
              <!-- <el-dropdown-item><el-button type="text" class="logout-btn" @click="openDialogFormVisible" >个人中心</el-button></el-dropdown-item> -->
              <el-dropdown-item divided><el-button type="text" class="logout-btn" @click="logout" >退出</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="text" class="ut-btn" style="margin-left: 12px;" @click="dialogFormVisible = true" v-if="!this.$store.state.user.loginStatus">登录</el-button>
      </div>
    </el-header>
    <!-- 用户登录 -->
    <el-dialog title="用户登录" :visible.sync="dialogFormVisible"
      width="30%"
      :close-on-click-modal="false">
      <el-form ref="loginForm"  label-width="80px" :model="loginForm"
      :rules="rules">
        <el-form-item label="账号" prop="userNo">
          <el-input v-model="loginForm.userNo"></el-input>
        </el-form-item>
        <el-form-item label="密码"  prop="pwd">
          <el-input v-model="loginForm.pwd"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doLogin">确 定</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  
<script>
import { doLogin, getInfo } from '@/api/common'
export default {
    data() {
      return {
          loginForm: {
            userNo: 'admin',
            pwd: '1'
          },
          rules: {
            userNo: [
              { required: true, message: '请输入账号', trigger: 'blur' }
            ],
            pwd: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ]
          },
        dialogFormVisible:false
      };
    },
    created() {
      this.$store.dispatch("GetInfo");
    },
    methods: {
      //登录方法
      doLogin() {
        this.$refs.loginForm.validate(valid => {
        if (!valid) return;
        doLogin(this.loginForm.userNo.trim(),this.loginForm.pwd.trim()).then(res => {
             this.$store.dispatch("loginToten", res.data.tokenValue);
              //拉取个人资料信息
              this.$store.dispatch("GetInfo");
              this.$message.success("登录成功");//弹框提示信息
              this.dialogFormVisible = false; // 登录后关闭弹框
        })
      })
      },
      //退出登录方法
      logout() {
        this.$confirm('确认要退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$store.dispatch("LogOut").then(response => {
              this.$message.success("退出登录成功！");
            }).catch(() => {
            });
        }).catch(() => {     
        });
      }
    },
  };
</script>
  
<style scoped>
  
/* Header */
.ai-header {
  /* background-color: #fff; */
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(248 249 245 / var(--tw-bg-opacity, 1));
  /* border-bottom: 1px solid #ececec; */
  padding: 0 32px;
}
.header-left {
  display: flex;
  align-items: center;
}
.logo {
  width: 48px;
  height: 48px;
}
.site-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.header-right {
  display: flex;
  align-items: center;
}
  </style>
  